<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="element">
        <span v-add-border="border">
            我是ikun
        </span>
        <!-- v-text-color  v-是固定写法 text-color根据directives里的textColor  color是data里的数值-->
        <div v-text-color="color">哈哈哈</div>

     </div>
     
     <script src="http://60.205.187.0/vue/vue.js"></script>
     <script type="text/javascript">
     
         var demo = new Vue({
             el: '#element',
             data:{
                border:'1px solid green',
                color:'yellow'
             },
             directives:{
                addBorder:{
                    inserted:function(el,binding){
                        // console.log('el',el)
                        // console.log('binding',binding)
                        el.style.border=binding.value;
                        // el.style.color=binding.value;
                    }
                },
                textColor:{
                    inserted:function(el,binding){
                        console.log('el',el)
                        console.log('binding',binding)
                        el.style.color=binding.value;
                    }
                }
             }
         })
     
     </script>
</body>
</html>